<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
<body>
<div layout:fragment="content">
<script type="text/javascript" th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:inline="javascript">
var pages;
var current=1;
$(document).ready(function(){ 
	/*加载第一页*/
	load(1);
	$('#next').on("click",function(){
		if(current!=pages){
			//点击下一页
			$('#next_page').attr("class","next");
			current+=1;
			load(current);
			$('#last_page').attr("class","previous");
		}else{
			//不可翻页
			$('#next_page').attr("class","next disabled");
			$('#last_page').attr("class","previous");
		}
		console.log(pages)
		console.log(current)
	});
	
	$('#last').on("click",function(){
		if(current!=1){
			current-=1;
			if(current==1){
				$('#last_page').attr("class","previous disabled");
			}
			load(current);
			//点击上一页
			$('#last_page').attr("class","previous");
		}else{
			//不可翻页
			$('#last_page').attr("class","previous disabled");
			$('#next_page').attr("class","next");
		}
		console.log(pages)
		console.log(current)
	});
});

/*异步加载*/
function load(current){
	$.ajax({
		url :"/hiview/"+[[${columnId}]]+"/list",
		type : "GET",
		dataType : "json",
		data :{
			size : 5,
			current : current
		},
		success : function(data,textStatus) {
			if(data.rspCode=='000000'){
				console.log(data)
				current = data.data.current;
				pages = data.data.pages;
				var list = data.data.records;
				var str='';
				for(item in list){
					str+="<div class='view-content-left animated'  data-animation='bounceIn' data-delay='0'>"+
			             "   <a href='/info/"+list[item].id+"'>"+
			              "      <div class='gallery-item'>"+
			               "         <img src='/img/img3.jpg' class='img-responsive'>"+
			                "        <div class='info'>"+
			                 "           <div class='info-con' >"+
			                 [[${column.columnName}]]+
			                   "         </div>"+
			                    "    </div>"+
			                    "</div>"+
			                "</a>"+
			                "<div class='content1'>"+
			                 "   <h4><a href='/info/"+list[item].id+"' >"+list[item].title+"</a></h4>"+
			                  "  <p >"+list[item].digest+"</p>"+
			                  "  <span class='pull-left'><i class='fa fa-clock-o'></i><span >"+list[item].publishTime+"</span></span>"+
			                  "  <span class='pull-right'>3条评论</span>"+
			               " </div>"+
			               " <div class='clearfix'></div>"+
			           "</div>";
				}
				//$('#next_page').attr('page',data.data.current);
				if(data.data.current==data.data.pages){
					$('#next_page').attr("class","next disabled");
				}
				$('#content_list').html(str);
			}else{
				$('#content_list').html(data.rspMsg);
			}
		}
	});
}

</script>
<section class="view-header" >
    <div class="container">
        <div class="row">
             <div class="col-sm-8" style="margin: 0;padding: 0px 0px 0px 15px;">
                 <a href="info">
                 <div class="gallery-item" style="height: 400px; overflow: hidden;">
                     <img src="/img/img3.jpg" class="img-responsive">
                     <div class="info">
                         <div class="info-con">
                             <h3>文章标题</h3>
                             <p>
                                 文章摘要内容，可只显示指定字节的内容
                             </p>
                         </div>
                     </div>
                     <div class="img-caption">
                         <h3>活动标题</h3>
                         <p>
                             2015-7-15
                         </p>
                     </div>
                 </div>
                 </a>
             </div>
            <div class="col-sm-4" style="margin: 0;padding: 0px 15px 0px 0px;">
                <div class="col-sm-12" style="margin: 0;padding: 0px;">
                    <a href="info">
                    <div class="gallery-item" style="height: 200px; overflow: hidden;">
                        <img src="/img/img2.jpg" class="img-responsive">
                        <div class="info">
                            <div class="info-con">
                                <h3>文章标题</h3>
                                <p>
                                    文章摘要内容，可只显示指定字节的内容
                                </p>
                            </div>
                        </div>
                        <div class="img-caption">
                            <h3>活动标题</h3>
                            <p>
                                2015-7-15
                            </p>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-sm-12" style="margin: 0;padding: 0px;">
                    <a href="info">
                    <div class="gallery-item" style="height: 200px; overflow: hidden;">
                        <img src="/img/img1.jpg" class="img-responsive">
                        <div class="info">
                            <div class="info-con">
                                <h3>文章标题</h3>
                                <p>
                                    文章摘要内容，可只显示指定字节的内容
                                </p>
                            </div>
                        </div>
                        <div class="img-caption">
                            <h3>活动标题</h3>
                            <p>
                                2015-7-15
                            </p>
                        </div>
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="view-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1 th:text="${column.columnName}">java</h1>
				<div id="content_list">
	                
                </div>
                <ul class="pager">
                    <li id="last_page" class="previous disabled"><a  id="last">&larr; 上一页</a></li>
                    <li id="next_page" class="next "><a  id="next">下一页 &rarr;</a></li>
                </ul>
            </div>
            <div class="col-sm-4">
                        <div class="view-content-right">
                            <h1>热门文章</h1>
                            <div class="aside-top">
                            <a href="info"><img src="/img/img1.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                            <a href="info"><img src="/img/img2.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">看看硅谷的科技企业是如何开除员工的</a>
                            <a href="info"><img src="/img/img3.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">大圣归来 三里屯优衣库试衣间是怎么刷爆朋友圈的</a>
                            <a href="info"><img src="/img/img4.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">不要被VR的火热骗了 至少现在它还真没什么卵用</a>
                            </div>
                        </div>
                        <div class="view-content-right" style="margin: 20px 0;">
                            <img src="/img/img5.jpg" class="img-responsive" />
                        </div>

                        <div class="view-content-right">
                            <h1>其他文章</h1>
                            <div class="aside-top">
                            <a href="info"><img src="/img/img1.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                            <a href="info"><img src="/img/img2.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                            <a href="info"><img src="/img/img3.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                            <a href="info"><img src="/img/img4.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                            </div>
                        </div>
            </div>
        </div>
    </div>
</section>
</div>

</body>
</html>